<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>终端配置</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<body style="text-align: center; background-color: #c2c2c2">

<!-- 你的 HTML 代码 -->
<h1>终端配置</h1>
<HR>
<div style="width: 600px;height: 700px; margin:0 auto;">
    <form action="" class="layui-form" style="white-space:nowrap!important;">
        <div class="layui-form-item">
            <label class="layui-form-label">计算机名称</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="alias" placeholder="请输入计算机名称"
                       th:value="${terminalConfig.alias}" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">服务器地址</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="serverAddress"
                       placeholder="请输入中控服务器通讯地址"
                       th:value="${terminalConfig.serverAddress}" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">服务器授权码</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="authorizationCode"
                       placeholder="与服务器通讯的必要凭证,请确保凭证有效性" th:value="${terminalConfig.authorizationCode}" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">资源存放目录</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="resourceAddress"
                       placeholder="中控服务器发布资源存放的位置" th:value="${terminalConfig.resourceAddress}" type="text">
            </div>
        </div>

        <!--播放器选项-->
        <h2>播放器配置</h2><br>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">启动时隐藏播放器</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="playerHide"
                           th:data-value="${terminalConfig.playerHide}" type="checkbox"
                           value="true">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">播放器全屏</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="playerFullScreen"
                           th:data-value="${terminalConfig.playerFullScreen}" type="checkbox"
                           value="true">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">启动时隐藏终端首页</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="browserHide"
                           th:data-value="${terminalConfig.browserHide}" type="checkbox"
                           value="true">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">终端首页全屏</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="browserFullScreen"
                           th:data-value="${terminalConfig.browserFullScreen}" type="checkbox"
                           value="true">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">启用待机画面</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="enableStandby"
                           th:data-value="${terminalConfig.enableStandby}" type="checkbox"
                           value="true">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">启动时自动播放</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="autoPlay" th:data-value="${terminalConfig.autoPlay}"
                           type="checkbox"
                           value="true">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">播放器工具栏隐藏</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="playerToolbarHide"
                           th:data-value="${terminalConfig.playerToolbarHide}" type="checkbox"
                           value="true">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">播放器多屏联动</label>
                <div class="layui-input-inline">
                    <input lay-filter="playerGanged" lay-skin="switch" lay-text="开启|关闭"
                           name="playerGanged" th:data-value="${terminalConfig.playerGanged}"
                           type="checkbox" value="true">
                </div>
            </div>

        </div>

        <div class="layui-form-item" name="playerGangedDiv" style="display: none">
            <div class="layui-inline">
                <label class="layui-form-label">本机设为服务端</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="playerGangedServer"
                           th:data-value="${terminalConfig.playerGangedServer}" type="checkbox"
                           value="true">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">本机设为客户端</label>
                <div class="layui-input-inline">
                    <input lay-skin="switch" lay-text="开启|关闭" name="playerGangedClient"
                           th:data-value="${terminalConfig.playerGangedClient}"
                           type="checkbox"
                           value="true">
                </div>
            </div>
        </div>

        <div class="layui-form-item" name="playerGangedDiv" style="display: none">
            <div class="layui-inline">
                <label class="layui-form-label">本机Socket</label>
                <div class="layui-input-inline" style="width: 178px">
                    <input autocomplete="off" class="layui-input" disabled="disabled"
                           style="background-color: #DEDEDEFF"
                           th:value="${terminalConfig.localSocketAddress}"
                           type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">主屏Socket</label>
                <div class="layui-input-inline" style="width:177px">
                    <input autocomplete="off" class="layui-input" name="mainFrameSocketAddress"
                           placeholder="拷贝主屏Socket地址到此"
                           th:value="${terminalConfig.mainFrameSocketAddress}" type="text">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">播放器窗口</label>
                <div class="layui-input-inline" style="width: 178px">
                    <input autocomplete="off" class="layui-input" name="playerSize"
                           placeholder="宽-高"
                           th:value="${terminalConfig.playerSize}" type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">播放器位置</label>
                <div class="layui-input-inline" style="width:177px">
                    <input autocomplete="off" class="layui-input" name="playerLocation"
                           placeholder="X-Y"
                           th:value="${terminalConfig.playerLocation}" type="text">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">播放模式</label>
            <div class="layui-input-inline">
                <div style="width: 489px;">
                    <select name="playMode" th:data-value="${terminalConfig.playMode}">
                        <option value="1">列表循环</option>
                        <option selected value="2">单个循环</option>
                        <option value="3">不循环</option>
                    </select></div>
            </div>
        </div>

        <input name="status" type="hidden" value="true">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="formDemo" lay-filter="formDemo" lay-submit>立即提交</button>
                <button class="layui-btn layui-btn-primary" id="test" lay-filter="test" lay-submit>测试连接</button>
                <a class="layui-btn layui-bg-blue" href="/terminal/index" lay-event="return">返回首页</a>
            </div>
        </div>
    </form>
    <div class="layui-form-mid layui-word-aux" style="text-align: left">
        注意项：
        <br>1.播放器配置需要重启生效;
        <br>2.播放器启用隐藏会使自动播放失效 ;
        <br>3.终端首页全屏下再启用终端首页隐藏会失效 ;
        <br>4.待机画面只有在播放模式中选择不循环时才能体现出来;
        <br>5.开启待机画面前先要在导航栏中导入待机画面资源. [资源 -> 新增].
    </div>

</div>


<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            //按钮禁用
            $('#formDemo').addClass("layui-btn-disabled").attr("disabled", true);
            $('#formDemo').html("处理中")

            $.ajax({
                url: '/terminal-config',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: "application/json",
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg("提交成功")
                        //修改成功跳转首页
                        setTimeout(function () {
                            window.location.href = "/terminal/index"
                        }, 500);
                    } else {
                        layer.msg(data.msg)
                    }
                }

            });
            return false;
        });

        //测试连接按钮
        form.on('submit(test)', function (data) {
            $.ajax({
                url: '/terminal-config/test',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: "application/json",
                success: function (result) {
                    layer.msg(result)
                    //修改成功跳转首页
                }

            });
            return false;
        });

        /*播放器配置回显*/
        var browserFullScreen = $("[name='browserFullScreen']").attr("data-value")
        var playMode = $("[name='playMode']").attr("data-value")
        var playerHide = $("[name='playerHide']").attr("data-value")
        var playerFullScreen = $("[name='playerFullScreen']").attr("data-value")
        var playerToolbarHide = $("[name='playerToolbarHide']").attr("data-value")
        var browserHide = $("[name='browserHide']").attr("data-value")
        var autoPlay = $("[name='autoPlay']").attr("data-value")
        var enableStandby = $("[name='enableStandby']").attr("data-value")
        var playerGanged = $("[name='playerGanged']").attr("data-value")
        var playerGangedServer = $("[name='playerGangedServer']").attr("data-value")
        var playerGangedClient = $("[name='playerGangedClient']").attr("data-value")

        if (playerGangedClient == 'true') {
            $("[name='playerGangedClient']").attr('checked', true);
        }
        if (playerGangedServer == 'true') {
            $("[name='playerGangedServer']").attr('checked', true);
        }
        if (browserFullScreen == 'true') {
            $("[name='browserFullScreen']").attr('checked', true);
        }
        if (playerHide == 'true') {
            $("[name='playerHide']").attr('checked', true);
        }
        if (playerFullScreen == 'true') {
            $("[name='playerFullScreen']").attr('checked', true);
        }
        if (playerToolbarHide == 'true') {
            $("[name='playerToolbarHide']").attr('checked', true);
        }
        if (browserHide == 'true') {
            $("[name='browserHide']").attr('checked', true);
        }
        if (autoPlay == 'true') {
            $("[name='autoPlay']").attr('checked', true);
        }
        if (enableStandby == 'true') {
            $("[name='enableStandby']").attr('checked', true);
        }
        if (playerGanged == 'true') {
            $("[name='playerGanged']").attr('checked', true);
            //开启时显示socket地址输入框
            $("[name='playerGangedDiv']").show();
        }

        $("[name='playMode']").val(playMode);
        form.render();//重新渲染页面checkbox控件

        //switch开关
        form.on('switch(playerGanged)', function (data) {
            // console.log(data.elem); //得到checkbox原始DOM对象
            var isOpen = data.elem.checked//开关是否开启，true或者false
            if (isOpen) {
                //开启时显示socket地址输入框
                $("[name='playerGangedDiv']").show();
            } else {
                $("[name='playerGangedDiv']").hide();
            }
        });

    });
</script>
</body>
</html>
